<template>
  <!-- 左侧菜单栏开始 -->
  <el-container style="height: 100vh;" v-if="$route.path!=='/'">
    <el-aside width="200px" style="background-color: #545c64;">
      <h4 style="color: #fff; padding: 20px;">👖后台管理系统</h4>
      <el-menu
        active-text-color="#ffdo4b"
        background-color="#545c64"
        class="el-menu-vertical"
        default-active="/usermanagement"  
        text-color="#fff"
        @select="change"
      > <!--大的菜单对象--><!--change事件会返回index的值-->
        <!--折叠对象开始-->
        <el-sub-menu index="1">
          <template #title>
            <el-icon><Location /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/usermanagement" >
              <el-icon><User /></el-icon><!--图标-->
              <span>用户列表</span>
            </el-menu-item>
            <el-menu-item index="/userrootmanage" >
              <el-icon><BellFilled /></el-icon>
              <span>权限管理</span>
            </el-menu-item>
            <el-menu-item index="/userfollowsmanagement" >
              <el-icon><StarFilled /></el-icon>
              <span>用户关注管理</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <!--折叠对象结束-->
        <!--折叠对象开始-->
        <el-sub-menu index="2">
          <template #title>
            <el-icon><Key /></el-icon>
            <span>权限管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1" >
              <el-icon><Guide /></el-icon><!--图标-->
              <span>权限列表</span>
            </el-menu-item>
            <el-menu-item index="2-2" >
              <el-icon><Van /></el-icon><!--图标-->
              <span>路由列表</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <!--折叠对象结束-->
        <!-- 新增标签管理折叠对象 -->
        <el-sub-menu index="3">
          <template #title>
            <el-icon><TrendCharts /></el-icon>
            <span>标签管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/tagmanagement" >
              <el-icon><CollectionTag /></el-icon>
              <span>标签列表</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <!-- 折叠对象结束 -->
        <!-- 新增文章相关菜单 -->
        <el-sub-menu index="4">
          <template #title>
            <el-icon><MessageBox /></el-icon>
            <span>文章管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/articlesmanagement" >
              <el-icon><Files /></el-icon> 
              <span>文章列表</span>
            </el-menu-item>
            <el-menu-item index="/articleslikemanagement" >
              <el-icon><Pointer /></el-icon>
              <span>文章点赞列表</span>
            </el-menu-item>
            <el-menu-item index="/articlesstarmanagement" >
              <el-icon><Star  /></el-icon> 
              <span>文章收藏列表</span>
            </el-menu-item>
            <el-menu-item index="/articlesreplymanagement" >
              <el-icon><Message /></el-icon> 
              <span>文章回复列表</span>
            </el-menu-item>
            <el-menu-item index="/articlesnextreply" >
              <el-icon><ChatDotSquare /></el-icon> 
              <span>楼中楼列表</span>
            </el-menu-item>
            <el-menu-item index="/articleviewsmanagement" >
              <el-icon><View /></el-icon> 
              <span>浏览记录列表</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <!-- 新增公告栏管理菜单 -->
        <el-sub-menu index="5">
          <template #title>
            <el-icon><DataAnalysis /></el-icon>
            <span>公告栏管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/noticemanagement" >
              <el-icon><Document /></el-icon>
              <span>公告列表</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <!-- 右边主视图开始 -->
    <el-container>
      <el-header class="no-side-padding">
        <div class="custom-breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item 
              v-for="(item, index) in $route.matched" 
              :key="index" 
              :to="{ path: item.path }"
            >
              {{ item.meta.title || item.name || '未命名' }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 我的下拉框 -->
        <el-dropdown @command="handleCommand" class="pull-right">
          <span class="el-dropdown-link">
            我的<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">个人信息</el-dropdown-item>
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
    <!-- 右边主视图结束 -->
  </el-container>
  <!-- 当路由路径为 / 时显示 -->
  <router-view v-else />
  <!-- 新增弹窗组件 -->
  <el-dialog v-model="dialogVisible" title="个人信息">
    <p>用户名: {{ uname }}</p>
    <p>Token: {{ token }}</p>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {
  User, BellFilled, Guide, Van, CollectionTag, DataLine, Location, 
  Files, Star, Message, ChatDotSquare, View, Pointer, MessageBox, TrendCharts, Key,
  StarFilled, DataAnalysis, Document // 新增图标
} from '@element-plus/icons-vue' // 引入图标
export default {
  components: {
    User, BellFilled, Guide, Van, CollectionTag, DataLine, Location, 
    Files, Star, Message, ChatDotSquare, View, Pointer, MessageBox, TrendCharts, Key,
    StarFilled, DataAnalysis, Document // 注册新图标
  },
  data() {
    return {
      dialogVisible: false,
      uname: '',
      token: ''
    }
  },
  created() {
    this.uname = localStorage.getItem('uname')
    this.token = localStorage.getItem('token')
  },
  methods: {
    change(e) {
      this.$router.push(e)
    },
    handleCommand(command) {
      if (command === 'profile') {
        // 打开弹窗
        this.dialogVisible = true;
      } else if (command === 'logout') {
        localStorage.removeItem('uname'); // 清除用户名
        localStorage.removeItem('token'); // 清除 Token
        this.$router.push('/'); // 跳转到登录页
      }
    }
  }
}
</script>

<style scoped>
.custom-breadcrumb {
  border: 1px solid #e4e7ed; 
  background-color: #f5f7fa; 
  padding: 10px 15px; 
  border-radius: 4px; 
}

.no-side-padding {
  padding-left: 0;
  padding-right: 0;
}

.pull-right {
  float: right;
  margin-right: 15px;
  margin-top: -25px; 
}

.el-icon {
  margin-left: 0;
  padding-left: 0;
}

.el-menu {
  margin-left: 0;
  padding-left: 0;
}

.el-menu-item {
  margin-left: 0;
  padding-left: 0;
}

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.el-menu {
  /* 确保菜单没有额外的外边距或内边距 */
  margin: 0;
  padding: 0;
  border: 0;
}
</style>